<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{position: absolute;border-radius: 50%;}
        input{position: relative;z-index: 1;}
    </style>
</head>
<body>
    <input type="button" id="add" value="+">
    <input type="button" id="diff" value="-">
    <input type="color" id="color">
</body>
<script>
    // 将元素的宽高颜色，设置为变量
    var w = 10;
    var h = 10;
    var c = "black";
    // 鼠标移动时，创建新元素，并设置样式
    document.onmousemove = function(eve){
        var e = eve || window.event;
        var div = document.createElement("div");
        div.className = "box";
        document.body.appendChild(div);
        div.style.left = e.pageX + "px";
        div.style.top = e.pageY + "px";
        // 根据js中的变量设置宽，高，颜色
        div.style.width = w + "px"
        div.style.height = h + "px"
        div.style.background = c;
    }
    var add = document.querySelector("#add");
    var diff = document.querySelector("#diff");
    var color = document.querySelector("#color");
    // 点击加号按钮，增加宽高变量
    add.onclick = function(){
        w += 5;
        h += 5;
    }
    // 点击减号按钮，减小宽高变量：注意最小值
    diff.onclick = function(){
        if(w <= 5 ){
            w = 5;
            h = 5;
        }else{
            w -= 5;
            h -= 5;
        }
    }
    // 切换颜色值时，改变颜色变量
    color.onchange = function(){
        c = this.value;
    }


</script>
</html>